<template>
  <div class="orderListStatus" ref="orderListStatus">
    <div>
      <ul>
        <li v-if="list.length" v-for="item in list" :key="item.orderId">
          <order-item v-if="item.memberOrderGoods" v-for="goods in item.memberOrderGoods" :key="goods.orderItemId" :orderSn="item.orderSn" :pricesData="goods" :status="item.status"></order-item>
          <div class="itemBottom">
            <div class="info clearfix">
              <i class="status">{{item.statusDesc}}</i>
              <span class="right">
                <em>
                  共<b>{{item.goodsCount}}</b>件商品
                </em>
                <em>合计：
                  <i class="price">
                    ￥{{item.needPayAmount}}
                  </i>
                </em>
              </span>
            </div>
            <!--
            1: 待支付
            2: 待发货
            3: 待收货
            4: 待评价
            5: 交易成功
            6: 交易关闭 -->
            <div class="btnWrap">
              <span class="glod" v-if="item.status==1" @click="pay(item.orderSn)">
                去支付
              </span>
              <span class="glod" v-if="item.status==3" @click="confirmGoods(item.orderSn)">
                确认收货
              </span>
              <span class="gray"  v-if="item.status==3" @click="watchLogistics(item.orderSn)">
                查看物流
              </span>
             <span class="glod"  v-if="item.status==4" @click="immedEvaluate(item.orderSn)">
                评价
              </span>
               <!-- <span class="gray"  v-if="(item.status==4||item.status==5)&&item.invoiceId">
                查看发票
              </span> -->
              <span class="glod" v-if="item.status==6" @click="deleteSure(item.orderSn)">
                删除订单
              </span>
            </div>
          </div>
        </li>
      </ul>
       <common-empty v-if="!noMore&&!list.length" :emptyObj="emptyObj" />
      <divider v-if="noMore">已经到达最底部</divider>
    </div>
  </div>
</template>

<script>
import {
  Divider
} from 'vux'
import {
  http
} from 'util/request'
import {
  OrderList,
  deleteOrder,
  confirmGoods,
  orderDetails
} from 'util/netApi'
import {
  Toast
} from 'mint-ui'
import notice from 'util/notice.js'
import OrderItem from './components/OrderItem'
import CommonEmpty from 'common/commonEmpty/CommonEmpty'
import emptyImg from '../../images/commentEmptyList.png'
import BScroll from 'better-scroll'
export default {
  name: 'OrderListStatus',
  components: {
    OrderItem,
    CommonEmpty,
    Divider
  },
  data () {
    return {
      currentIndex: -1,
      list: [],
      page: 1,
      noMore: false,
      orderSn: '',
      emptyObj: {
        emptyImg,
        emptyBold: '暂无订单',
        emptyP: '您还没有购买的订单',
        buttonText: null,
        buttonRouter: null
      }
    }
  },
  computed: {

  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'orderListStatus') {
        this.noMore = false
        this.page = 1
        this.list = []
        this.getList()
      }
    }
  },
  methods: {
    // 获取订单列表
    getList () {
      this.currentIndex = this.$route.path.split('/')[2]
      let params = {
        page: this.page,
        rows: 20,
        status: this.currentIndex
      }
      if (!this.noMore) {
        http(OrderList, params).then((res) => {
          console.log(res)
          if (res.data.code === 0) {
            this.list = [...this.list, ...res.data.body.list]
            this.scrollInit()
            if (this.page !== 1 && res.data.body.list.length === 0) {
              this.scroll.finishPullUp()
              this.noMore = true
            }
          }
        })
      }
    },
    // 查看物流
    watchLogistics (orderSn) {
      this.$router.push(`/watchLogistics/${orderSn}`)
    },
    // 去支付
    pay (orderSn) {
      // 点击了去支付之后判断当前订单是否超时
      http(orderDetails, [orderSn]).then((res) => {
        let status = res.data.body.status
        if (status != 1) {
          Toast({
            message: '支付超时',
            position: 'center',
            duration: 2000
          })
          setTimeout(() => {
            this.$router.go(0)
          }, 2000)
        } else {
          this.$router.push(`/immedPayment/${orderSn}/1`)
        }
      })
    },
    // 立即评价
    immedEvaluate (orderCode) {
      this.$router.push('/immedEvaluate/' + orderCode)
    },
    // 确认删除弹窗
    deleteSure (orderSn) {
      this.orderSn = orderSn
      notice.confirm('确认删除订单？', '删除订单后无法恢复，请谨慎操作', this.deleteOrder)
    },
    // 删除订单
    deleteOrder () {
      http(deleteOrder, [this.orderSn]).then(res => {
        if (res.data.code === 0) {
          this.page = 1
          this.list = []
          this.getList()
          // this.$router.push('/orderList/-1')
        }
      })
    },
    // 确认收货
    confirmGoods (orderCode) {
      notice.confirm('您确定收到货物？', '否则可能钱财两空', function () {
        http(confirmGoods, [orderCode]).then((response) => {
          if (response.data.body === true) {
            Toast({
              message: '收货成功',
              position: 'center',
              duration: 2000
            })
            setTimeout(() => {
              this.getList()
            }, 2000)
          }
        })
      })
    },
    scrollInit () {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.orderListStatus, {
          scrollY: true,
          click: true,
          pullUpLoad: {
            threshold: -50,
            moreTxt: '加载更多',
            noMoreTxt: '没有更多数据了'
          },
          bounce: {
            top: false,
            bottom: true
          }
        })
        this.scroll.on('pullingUp', () => {
          this.page++
          this.getList()
        })
      } else {
        this.scroll.refresh()
        this.scroll.finishPullUp()
      }
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="stylus" scoped>
.orderListStatus
  height calc(100%-(120px))
  padding 0 50px
  z-index -1
  overflow hidden
  &>div
    padding-top 40px
    padding-bottom 140px
  li
    background-color #fff
    margin-bottom 30px
  .itemBottom
    padding 0 50px 50px
    .info
      .status
        color #BA825A
        font-size 40px
        float left
      .right
        float right
        color #999999
        font-size 36px
        line-height 50px
        em
          padding-left 22px
        b
          color #333333
        .price
          color #262626
          font-size 50px
          font-weight 600
  .btnWrap
    margin-top 50px
    font-size 0
    text-align right
    span
      display inline-block
      font-size 40px
      width 240px
      height 86px
      line-height 86px
      border-radius 43px
      text-align center
      margin-left 30px
    .gray
      color #666666
      border 2px solid #808080
    .glod
      color #BA825A
      border 2px solid #BA825A
  .commonEmpty
    background-color #f5f5f5

</style>
